<template>
  <div id="msg-container">
    <div class="sidebar">
      <card />
      <list />
    </div>
    <div class="main">
      <message />
      <usertext />
    </div>
  </div>
</template>

<script>
import card from '@/components/Chat/card.vue'
import list from '@/components/Chat/list.vue'
import message from '@/components/Chat/message.vue'
import usertext from '@/components/Chat/usertext.vue'

export default {
  name: 'Message',
  components: {
    card,
    list,
    message,
    usertext
  },
  data() {
    return {

    }
  },
  mounted: function() {
    this.$store.dispatch('chat/initData')
  }
}
</script>

<style lang="scss" scoped>
#msg-container {
  margin: 30px auto;
  width: 800px;
  height: 600px;
  overflow: hidden;
  border-radius: 10px;
  background: #EEE;

  .sidebar,
  .main {
    height: 100%;
  }

  .sidebar {
    float: left;
    color: #F4F4F4;
    background-color: #2E3238;
    width: 200px;
  }

  .main {
    position: relative;
    overflow: hidden;
    background-color: #EEE;
  }
}
</style>
